<template>
    <div class="search">
        <div class="searchTop">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-fanhui1"></use>
            </svg>
            <div class="search">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <input type="text" placeholder="gx" v-model="searchKey" @keydown.enter="enterKey">
            </div>   
        </div>
        <div class="searchContent">
            <div class="searchContentTop">
                <p>搜索历史</p>
                <svg class="icon" aria-hidden="true" @click="delHistory">
                    <use xlink:href="#icon-shanchu"></use>
                </svg>
            </div>
            <div class="searchHistory">
                <span v-for="item in keyWorldList" :key="item" @click="searchHistory(item)">{{ item }}</span>
            </div>
        </div>
        <!-- 渲染搜索到的歌 -->
        <div class="searchMusic">
             <div class="searchMusicList" v-for="(item,i) in searchMusicList" :key="i">
                <div class="searchMusicListLeft" @click="updateIndex(item)">
                    <span>{{ i+1 }}</span>
                    <div class="gx">
                        <p>{{ item.name }}</p>
                        <span class="author" v-for="(author,name) in item.ar" :key="name">{{ author.name }}</span>
                    </div>
                    
                </div>
                <div class="searchMusicListRight">
                    <svg class="icon" aria-hidden="true" v-if="item.mv !=0">
                        <use xlink:href="#icon-MV"></use>
                    </svg>
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-aixin"></use>
                        </svg> 
                    </span>                   
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 导入搜索获取歌的方法
import { getSearchMusic } from '@/api/home'
export default {
    data() {
        return {
            keyWorldList: [],
            searchKey: " ",
            searchMusicList:[]
        };
    },
    mounted() {
        //  从本地缓存中获取搜索记录，切记，由于本地storage是前面方法中创建的，
        // 所以一定要先判断本地存储当中是否有前面创建的
        if (localStorage.getItem('keyWorldList')) {
            this.keyWorldList = JSON.parse(localStorage.getItem('keyWorldList'))
        }
        // if (localStorage.getItem('searchMusicList')) {
        //     this.searchMusicList = JSON.parse(localStorage.getItem('searchMusicList'))
        // }
    },
    methods: {
        enterKey:async function () {
            // 判断输入的是否为空
            if (this.searchKey != "") {
                 // 将input获取到的内容储存在数组当中
                // console.log(this.searchKey)
                this.keyWorldList.unshift(this.searchKey);
                // 往数组当中添加前，去重
                this.keyWorldList = [... new Set(this.keyWorldList)]

                // 固定数组的长度
                if (this.keyWorldList.length > 30) {
                    // 使用splice分割
                    this.keyWorldList.splice(this.keyWorldList.length-1,1)
                }
                // 调用搜索获取歌曲方法
                let res =await getSearchMusic(this.searchKey)
                this.searchMusicList = res.data.result.songs
                console.log(this.searchMusicList)

                // 将存放搜索记录的数组存放在本地当中
                // console.log(this.keyWorldList)
                localStorage.setItem("keyWorldList", JSON.stringify(this.keyWorldList))

                // //测试
                // localStorage.setItem("searchMusicList",JSON.stringify(this.searchMusicList)) 
                // 每次输入完成后将input里面内容清空
                // console.log(localStorage.setItem)
                this.searchKey = ""
            }     
        },
        delHistory: function () {
            // 先判断本地存储当中是否存在
            if (localStorage.getItem('keyWorldList')) {
                localStorage.removeItem('keyWorldList')
                this.keyWorldList = []
                this.searchMusicList = []
            }
        },
        // 通过搜索历史获取歌曲
        searchHistory:async function (item) {
            let res = await getSearchMusic(item)
            console.log(res)
            this.searchMusicList = res.data.result.songs
            console.log(this.searchMusicList)
        },
        // 更新列表的下标
        updateIndex: function (item) {
            console.log(item)
            this.$store.commit("pushPlayList", item)
            // 更新播放列表的下标
            this.$store.commit("updatePlayListIndex",this.$store.state.playList.length-1)
        }
    },
  
}

</script>

<style lang="less" scoped>
.search{
    width: 100%;
    height: 100%;
    .searchTop{
        margin-top: 2vh;
        display: flex;
        align-items: center;
        >.icon{
            width: 8vw;
            height: 8vw;
            margin-left: 3vw;
        }
        .search{
            width: 80%;
            // height: 2vh;
            display: flex;
            align-items: center;
            border: 3px solid #a19f9f;
            border-radius: 10vw;
            margin-left: 2vw;
            padding: 1vw 2vw;
            .icon{
                width: 6vw;
                height: 6vw;
                // margin-left: 2vw;
            }
            input{
                border: none;
                margin-left: 2vw;
                font-size: 4vw;
                font-weight: bold;
            }
            // input:hover{
            //     border-left: 1px solid blueviolet;
            // }
        }
      
    }
    .searchContent{
        width: 100%;

        .searchContentTop{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2vh;
            p{
                font-size: 4vw;
                font-weight: bold;
                margin-left: 4vw;
            }
            .icon{
                width: 8vw;
                height: 8vw;
                margin-right: 2vw;
            }
        }
        .searchHistory{
            width: 90%;
            margin-left: 5%;
            height: 12vh;
            overflow: scroll;
            border: 1px solid #a19f9f;
            border-radius: 5px;
            margin-top: 2vw;
            // display: flex;
            // flex-wrap: 3;
            span{
                font-size: 4vw;
                // color: aliceblue;
                background-color: rgba(208, 90, 81,0.6);
                border-radius: 5px;
                padding: 1vw 2vw;
                margin-left: 3vw;
                margin-top: 2vw;
                display: inline-flex;
                // line-height: 2;
                // white-space: nowrap;
            }
        }
    }
    .searchMusic{
        width: 100%;
        height: 66vh;
        overflow: scroll;
        margin-top: 1.5vh;
        .searchMusicList{
            width: 100%;
            height: 7vh;
            display: flex;
            justify-content: space-between;

            .searchMusicListLeft{
                display: flex;
                align-items: center;
                >span{
                    font-size: 5vw;
                    margin-left: 3vw;
                    width: 6vw;
                    text-align: center;
                }
                .gx{
                    margin-left: 2vw;
                    p{
                        font-size: 4vw;
                        // font-family: "楷体"
                        font-weight: bold;
                    }
                    span{
                        width: 30vw;
                        overflow: scroll;
                    }
                }  
            }
            .searchMusicListRight{
                display: flex;
                align-items: center;
                >.icon{
                    width: 10vw;
                    height: 10vw;
                    margin-right: 4vw;
                }
                
                span{
                    margin-right: 5vw;
                    .icon{
                        width: 6vw;
                        height: 6vw;
                    }
                }

            }

        }
    }
    
}

</style>